<template>
  <div class="audit-timeline">
    <h4 class="timeline-title">
      <el-icon><Timer /></el-icon>
      审核流程
    </h4>
    
    <el-timeline class="audit-timeline-content">
      <!-- 提交阶段 -->
      <el-timeline-item
        timestamp="提交阶段"
        placement="top"
        type="primary"
        :icon="getStageIcon('submit')"
        :color="getStageColor('submit')"
      >
        <div class="timeline-card">
          <div class="stage-header">
            <h5>课程教学总结提交</h5>
            <el-tag :type="getStageTagType('submit')" size="small">
              {{ getStageStatus('submit') }}
            </el-tag>
          </div>
          
          <div class="stage-content">
            <div class="info-row">
              <span class="label">提交人：</span>
              <span>{{ submitInfo.submitterName || '-' }}</span>
            </div>
            <div class="info-row">
              <span class="label">提交时间：</span>
              <span>{{ formatDate(submitInfo.submitTime) || '-' }}</span>
            </div>
            <div v-if="submitInfo.description" class="info-row">
              <span class="label">说明：</span>
              <div class="description">{{ submitInfo.description }}</div>
            </div>
          </div>
        </div>
      </el-timeline-item>

      <!-- 教研室审核阶段 -->
      <el-timeline-item
        timestamp="教研室审核"
        placement="top"
        type="warning"
        :icon="getStageIcon('research')"
        :color="getStageColor('research')"
      >
        <div class="timeline-card">
          <div class="stage-header">
            <h5>教研室审核</h5>
            <el-tag :type="getStageTagType('research')" size="small">
              {{ getStageStatus('research') }}
            </el-tag>
          </div>
          
          <div class="stage-content">
            <div class="info-row">
              <span class="label">审核人：</span>
              <span v-if="canShowAuditorDetails">
                {{ researchAudit?.auditorName || '待审核' }}
              </span>
              <span v-else>***</span>
            </div>
            <div class="info-row">
              <span class="label">审核时间：</span>
              <span>{{ formatDate(researchAudit?.auditTime) || '待审核' }}</span>
            </div>
            <div v-if="researchAudit?.auditTime" class="info-row">
              <span class="label">审核结果：</span>
              <el-tag 
                :type="researchAudit?.approved ? 'success' : 'danger'" 
                size="small"
              >
                {{ researchAudit?.approved ? '通过' : '未通过' }}
              </el-tag>
            </div>
            <div v-if="researchAudit?.comments" class="info-row">
              <span class="label">审核意见：</span>
              <div class="audit-comments">{{ researchAudit.comments }}</div>
            </div>
          </div>
        </div>
      </el-timeline-item>

      <!-- 部系审核阶段 -->
      <el-timeline-item
        timestamp="部系审核"
        placement="top"
        type="success"
        :icon="getStageIcon('department')"
        :color="getStageColor('department')"
      >
        <div class="timeline-card">
          <div class="stage-header">
            <h5>部系审核</h5>
            <el-tag :type="getStageTagType('department')" size="small">
              {{ getStageStatus('department') }}
            </el-tag>
          </div>
          
          <div class="stage-content">
            <div class="info-row">
              <span class="label">审核人：</span>
              <span v-if="canShowAuditorDetails">
                {{ departmentAudit?.auditorName || '待审核' }}
              </span>
              <span v-else>***</span>
            </div>
            <div class="info-row">
              <span class="label">审核时间：</span>
              <span>{{ formatDate(departmentAudit?.auditTime) || '待审核' }}</span>
            </div>
            <div v-if="departmentAudit?.auditTime" class="info-row">
              <span class="label">审核结果：</span>
              <el-tag 
                :type="departmentAudit?.approved ? 'success' : 'danger'" 
                size="small"
              >
                {{ departmentAudit?.approved ? '通过' : '未通过' }}
              </el-tag>
            </div>
            <div v-if="departmentAudit?.comments" class="info-row">
              <span class="label">审核意见：</span>
              <div class="audit-comments">{{ departmentAudit.comments }}</div>
            </div>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>

    <!-- 总体状态显示 -->
    <div class="overall-status">
      <div class="status-card">
        <div class="status-header">
          <el-icon><Flag /></el-icon>
          <span>当前状态</span>
        </div>
        <div class="status-content">
          <el-tag :type="getOverallStatusType()" size="large" effect="dark">
            {{ getOverallStatusText() }}
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { Timer, Flag, Document, Check, Close, Clock } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

export default {
  name: 'AuditTimeline',
  components: {
    Timer,
    Flag,
    Document,
    Check,
    Close,
    Clock
  },
  props: {
    submitInfo: {
      type: Object,
      default: () => ({})
    },
    researchAudit: {
      type: Object,
      default: null
    },
    departmentAudit: {
      type: Object,
      default: null
    },
    currentStatus: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const userStore = useUserStore()

    // 检查是否可以显示审核人详细信息
    const canShowAuditorDetails = computed(() => {
      const userRoles = userStore.roles || []
      return userRoles.includes('ADMIN') || 
             userRoles.includes('RESEARCH_OFFICE_ADMIN') ||
             userRoles.includes('DEPARTMENT_ADMIN')
    })

    // 获取阶段图标
    const getStageIcon = (stage) => {
      switch (stage) {
        case 'submit':
          return Document
        case 'research':
          return props.researchAudit?.approved === true ? Check : 
                 props.researchAudit?.approved === false ? Close : Clock
        case 'department':
          return props.departmentAudit?.approved === true ? Check : 
                 props.departmentAudit?.approved === false ? Close : Clock
        default:
          return Clock
      }
    }

    // 获取阶段颜色
    const getStageColor = (stage) => {
      switch (stage) {
        case 'submit':
          return props.submitInfo.submitTime ? '#409eff' : '#c0c4cc'
        case 'research':
          if (!props.researchAudit?.auditTime) return '#c0c4cc'
          return props.researchAudit.approved ? '#67c23a' : '#f56c6c'
        case 'department':
          if (!props.departmentAudit?.auditTime) return '#c0c4cc'
          return props.departmentAudit.approved ? '#67c23a' : '#f56c6c'
        default:
          return '#c0c4cc'
      }
    }

    // 获取阶段状态
    const getStageStatus = (stage) => {
      switch (stage) {
        case 'submit':
          return props.submitInfo.submitTime ? '已提交' : '未提交'
        case 'research':
          if (!props.researchAudit?.auditTime) return '待审核'
          return props.researchAudit.approved ? '已通过' : '未通过'
        case 'department':
          if (!props.departmentAudit?.auditTime) return '待审核'
          return props.departmentAudit.approved ? '已通过' : '未通过'
        default:
          return '待处理'
      }
    }

    // 获取阶段标签类型
    const getStageTagType = (stage) => {
      switch (stage) {
        case 'submit':
          return props.submitInfo.submitTime ? 'primary' : 'info'
        case 'research':
          if (!props.researchAudit?.auditTime) return 'warning'
          return props.researchAudit.approved ? 'success' : 'danger'
        case 'department':
          if (!props.departmentAudit?.auditTime) return 'warning'
          return props.departmentAudit.approved ? 'success' : 'danger'
        default:
          return 'info'
      }
    }

    // 获取总体状态类型
    const getOverallStatusType = () => {
      switch (props.currentStatus) {
        case 0:
        case 1:
          return 'info'
        case 2:
          return 'warning'
        case 3:
        case 4:
          return 'success'
        case 5:
        case 6:
          return 'danger'
        default:
          return 'info'
      }
    }

    // 获取总体状态文本
    const getOverallStatusText = () => {
      switch (props.currentStatus) {
        case 0:
          return '未创建'
        case 1:
          return '未提交'
        case 2:
          return '已提交，待教研室审核'
        case 3:
          return '教研室已通过，待部系审核'
        case 4:
          return '部系已通过，流程完成'
        case 5:
          return '教研室审核未通过'
        case 6:
          return '部系审核未通过'
        default:
          return '未知状态'
      }
    }

    // 格式化日期
    const formatDate = (date) => {
      if (!date) return null
      const d = new Date(date)
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
    }

    return {
      canShowAuditorDetails,
      getStageIcon,
      getStageColor,
      getStageStatus,
      getStageTagType,
      getOverallStatusType,
      getOverallStatusText,
      formatDate
    }
  }
}
</script>

<style scoped>
.audit-timeline {
  background: #fafafa;
  border-radius: 8px;
  padding: 20px;
}

.timeline-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.audit-timeline-content {
  margin: 0;
}

.timeline-card {
  background: white;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.stage-header h5 {
  margin: 0;
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

.stage-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
}

.label {
  color: #606266;
  font-weight: 500;
  min-width: 70px;
  flex-shrink: 0;
}

.description,
.audit-comments {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 8px;
  color: #606266;
  border-left: 3px solid #409eff;
  margin-top: 4px;
  line-height: 1.5;
}

.overall-status {
  margin-top: 20px;
}

.status-card {
  background: white;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  padding: 16px;
  text-align: center;
}

.status-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #303133;
  font-weight: 600;
}

.status-content {
  display: flex;
  justify-content: center;
}

:deep(.el-timeline-item__timestamp) {
  font-weight: 600;
  color: #303133;
}

:deep(.el-timeline-item__content) {
  top: -6px;
}
</style>